<style scoped>
.title {
  margin-right: auto;
}

.button {
  margin-left: auto;
}
</style>

<template>
  <div id="window6">

    <!-- 头部：标题 -->
    <div style="padding: 5px">
      <el-row>
        <!--        标题-->
        <el-col :span="17" style="text-align: right;">矛盾纠纷环比分析</el-col>
        <!--        关闭按钮-->
        <el-col :span="7" style="text-align: right;">
          <div>
            <el-popconfirm title="是否关闭该窗口" @confirm="closeWindow">
              <template #reference>
                <el-icon>
                  <CircleClose/>
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主体：散点图 -->
    <div ref="chart" style="width: 90%; height: 350px;margin: 15px 10px 10px 10px"></div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import {defineComponent} from "vue";

import { defineEmits } from 'vue'

const emit = defineEmits()

const closeWindow = () => {
  emit('closeWindow')
}
// 散点图
export default defineComponent({
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.renderChart();
  },
  methods: {
    renderChart() {
      const option = {
        title: {
          text: '媒体类型：日环社'
        },
        legend: {
          data: ['1990', '2018'],
          left: 'right'
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            name: 1990,
            symbolSize: 20,
            data: [
              [10.0, 7.09],
              [12.9, 5.58],
              [9.45, 7.81],
              [8.15, 6.2],
              [10.5, 6.2],
              [3.53, 3.23],
              [2.21, 5.83],
              [7.88, 2.83],
              [5.52, 1.48]
            ],
            type: 'scatter'
          },
          {
            name: '2018',
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            type: 'scatter'
          }
        ]
      };

      this.chart.setOption(option);
    },
  },
})
</script>


